<template>
    <el-row class="refundorder">
        <el-col :span="24" class="content-header">退款订单</el-col>
        <el-card class="box">
            <el-form :inline="true" :model="orderQueryForm" ref="orderQueryForm"
            :label-position="labelPosition" label-width="100px">
                <el-form-item label="订单号：">
                    <el-input v-model="orderQueryForm.orderNo" placeholder="订单号"></el-input>
                </el-form-item>
                <el-form-item label="买家名称：">
                    <el-input v-model="orderQueryForm.buyEnter" placeholder="买家名称"></el-input>
                </el-form-item>
                <el-form-item label="客户区域：">
                    <el-input v-model="orderQueryForm.enterRegion" placeholder="客户区域"></el-input>
                </el-form-item>
                <el-form-item label="订单时间">
                    <el-date-picker
                      v-model="orderQueryForm.dateRange"
                      type="daterange"
                      range-separator="~"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                      value-format="yyyy-MM-dd">
                    </el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="query">查询</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button @click="resetForm">重置</el-button>
                </el-form-item>
            </el-form>
            <el-row>
                <el-col :span="24">
                    <span>
                        <el-dropdown @command="handleCommand" trigger="click">
                          <el-button type="primary" size="small">
                            <i class="fa fa-print fa-lg right-5"></i>打印
                            <i class="el-icon-arrow-down el-icon--right"></i>
                          </el-button>
                          <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item command="1_">模板一</el-dropdown-item>
                            <el-dropdown-item command="2_">模板二</el-dropdown-item>
                            <el-dropdown-item command="3_">模板三</el-dropdown-item>
                          </el-dropdown-menu>
                        </el-dropdown>
                    </span>
                    <span>
                        <el-button type="primary" size="small"><i class="fa fa-cloud-download fa-lg right-5"></i>导出</el-button>
                    </span>
                    <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark"
                        style="width: 100%" @selection-change="handleSelectionChange">
                        <el-table-column
                          type="selection"
                          width="40">
                        </el-table-column>
                        <el-table-column
                          label="操作"
                          width="205">
                          <template slot-scope="scope">
                            <span>
                                <el-button type="primary" size="small" @click="editOrder(scope.row.orderNo)"><i class="fa fa-edit fa-lg right-5"></i>编辑</el-button>
                            </span>
                            <span>
                                <el-dropdown @command="handleCommand" trigger="click">
                                  <el-button type="primary" size="small">
                                    <i class="fa fa-print fa-lg right-5"></i>打印
                                    <i class="el-icon-arrow-down el-icon--right"></i>
                                  </el-button>
                                  <el-dropdown-menu slot="dropdown">
                                    <el-dropdown-item :command="'1_' + scope.row.orderNo">模板一</el-dropdown-item>
                                    <el-dropdown-item :command="'2_' + scope.row.orderNo">模板二</el-dropdown-item>
                                    <el-dropdown-item :command="'3_' + scope.row.orderNo">模板三</el-dropdown-item>
                                  </el-dropdown-menu>
                                </el-dropdown>
                            </span>
                          </template>
                        </el-table-column>
                        <el-table-column
                          prop="orderNo"
                          label="订单号"
                          width="160">
                        </el-table-column>
                        <el-table-column
                          prop="buyEnter"
                          label="买家名称">
                        </el-table-column>
                        <el-table-column
                          prop="orderTotel"
                          label="订单总金额">
                        </el-table-column>
                        <el-table-column
                          prop="orderPay"
                          label="应付金额">
                        </el-table-column>
                        <el-table-column
                          prop="distributionFee"
                          label="配送费">
                        </el-table-column>
                        <el-table-column
                          prop="number"
                          label="数量"
                          width="80">
                        </el-table-column>
                        <el-table-column
                          prop="cerateDate"
                          label="创建日期">
                        </el-table-column>
                        <el-table-column
                          prop="orderState"
                          label="订单状态"
                          width="80">
                        </el-table-column>
                        <el-table-column
                          prop="payState"
                          label="支付状态"
                          width="80">
                        </el-table-column>
                    </el-table>
                </el-col>
                <el-col :span="24" class="pagination">
                    <el-pagination
                      @size-change="handleSizeChange"
                      @current-change="handleCurrentChange"
                      :current-page="currentPage"
                      :page-sizes="[10, 20, 30, 40, 50]"
                      :page-size="10"
                      layout="total, sizes, prev, pager, next, jumper"
                      :total="listTotal">
                    </el-pagination>
                </el-col>
            </el-row>
        </el-card>
    </el-row>
</template>
<script>
    import './refundorder.scss';
    import router from '@/router/index';

    export default { 
        data () {
            return {
                duration : this.global.duration,
                labelPosition : this.global.labelPosition,
                orderQueryForm : {
                    orderNo : "",
                    buyEnter : "",
                    enterRegion : "",
                    startDate : "",
                    endDate : "",
                    dateRange : []
                },
                tableData : [{
                    orderNo : "2017121308491111",
                    buyEnter : "东方",
                    orderTotel : "778.63",
                    orderPay : "778.63",
                    distributionFee : "0.0",
                    number : "12",
                    cerateDate : "2017-12-13 08:49:02",
                    orderState : "已取消",
                    payState : "待支付"
                },{
                    orderNo : "20171213084902222",
                    buyEnter : "东方",
                    orderTotel : "778.63",
                    orderPay : "778.63",
                    distributionFee : "0.0",
                    number : "12",
                    cerateDate : "2017-12-13 08:49:02",
                    orderState : "已取消",
                    payState : "待支付"
                }],
                listTotal : 2,
                currentPage : 1,
                multipleSelection : [],
            }
        },
        methods: {
            query : function(){
                let rangeArr = this.orderQueryForm.dateRange;
                if(rangeArr.length != 0){
                    this.orderQueryForm.startDate = rangeArr[0];
                    this.orderQueryForm.endDate = rangeArr[1];
                }
                
                console.info(this.orderQueryForm);
            },
            resetForm : function(formName){
                this.orderQueryForm = {
                    orderNo : "",
                    buyEnter : "",
                    enterRegion : "",
                    startDate : "",
                    endDate : "",
                    dateRange : []
                }
            },
            handleCommand : function(command){
                let arr = command.split("_");
                if(!arr[1] || arr[1] == ""){//说明是点击的是头部按钮
                    if(this.multipleSelection.length == 0){
                        this.$message({
                            type: 'error',
                            duration : this.duration,
                            message: '请选择列表中订单记录!'
                        });
                        return;
                    }
                }
                this.$message('click on item ' + arr[0]);
            },
            handleSelectionChange : function(val){
                this.multipleSelection = [];
                let length = val.length;
                for(let i = 0; i < length; i ++ ){
                    let item = val[i];
                    let _orderNo = item.orderNo;
                    this.multipleSelection.push(_orderNo);
                }
            },
            handleSizeChange : function(){
                //改变分页数量
                console.info("handleSizeChange");
            },
            handleCurrentChange : function(){
                //currentPage 改变时会触发
                console.info("handleCurrentChange");
            },
            editOrder : function(orderNo){
                this.$router.push({
                  name: 'orderdetail', 
                  params: {orderNo: orderNo, pageTo : "refundorder"}
                });
            }
        },
        watch: {
           
        },
        created: function(){

        },
        beforeDestroy:function(){
          
        }
    }
</script>